<template>
  <div class="demo">
    <div class="bar-sample">
      <e-charts :options="option"
                :listen="events"
                :carousel="carousel1"
                allow-zoom
                @ready="onChartReady"
                zoom-to=".anchor-content" zoom-background="rgba(255, 255, 255, .6)"/>
    </div>
    <div class="map-sample">
      <e-charts :options="mapOption"
                :carousel="carousel2"
                id="1222" show-empty-mask/>
    </div>
    <div class="map-sample">
      <e-charts :options="liquidOption" id="1223" show-empty-mask/>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import mapData from './100000.json'
import ECharts from '@/components/index'

window.echarts = echarts
ECharts.defaults.animation = false

export default {
  name: 'Demo',
  components: {ECharts},
  data() {
    return {
      events: {
        click: (e) => {
          // eslint-disable-next-line
          console.info(e)
        }
      },
      mounted: false,
      carousel1: {
        interval: 2000,
        mouse: true,
        actions: [
          {
            type: 'showTip'
          },
          {
            type: 'highlight',
            undo: true
          }
        ]
      },
      carousel2: {
        interval: 3000,
        mouse: false,
        actions: [
          {
            type: 'showTip'
          },
          {
            type: 'geoSelect',
            undo: true
          },
          {
            type: 'highlight',
            seriesIndex: [0, 1],
            undo: true
          }
        ]
      }
    }
  },
  mounted() {
    echarts.registerMap('100000', mapData)
    this.mounted = true
  },
  computed: {
    option() {
      let legend = ['legend1', 'legend2']
      let category = ['类别1', '类别2', '类别3', '类别4']
      return {
        title: {
          text: '标题'
        },
        tooltip: {},
        legend: {
          data: legend
        },
        xAxis: {
          type: 'category',
          data: category
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: 'legend1',
          type: 'bar',
          data: [20, 40, 50, 90],
          emphasis: {
            itemStyle: {
              color: 'blue'
            }
          }
        }, {
          name: 'legend2',
          type: 'line',
          data: [20, 40, 50, 90]
        }]
      }
    },
    mapOption() {
      if (!this.mounted) {
        return {}
      }
      return {
        tooltip: {},
        title: {
          text: '中华人民共和国'
        },
        geo: {
          type: 'map',
          map: '100000',
          roam: true
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          symbol: 'pin',
          symbolSize: 20,
          data: mapData.features.map(item => {
            if (!item.properties.cp) {
              return {}
            }
            return {
              name: item.properties.name,
              value: [...item.properties.cp, Math.random() * 100]
            }
          }),
          emphasis: {
            itemStyle: {
              color: 'blue'
            }
          }
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          symbolSize: 10,
          itemStyle: {
            color: '#00000055'
          },
          data: mapData.features.map(item => {
            if (!item.properties.cp) {
              return {}
            }
            return {
              name: item.properties.name,
              value: [...item.properties.cp, Math.random() * 100]
            }
          }),
          emphasis: {
            itemStyle: {
              color: '#00ff00aa'
            }
          }
        }]
      }
    },
    liquidOption() {
      return {
        series: {
          type: 'liquidFill',
          data: [0.8, 0.8]
        }
      }
    }
  },
  methods: {
    onChartReady(e) {
      // eslint-disable-next-line
      console.debug(e)
    }
  }
}
</script>

<style scoped>
.bar-sample {
  height: 400px;
}

.map-sample {
  height: 600px;
}
</style>
